<template>
  <div :id="className" :style="{height:height,width:width}" />
</template>

<script>
import * as echarts from 'echarts';
require('echarts/theme/macarons') // echarts theme
import { debounce } from '@/util/util'

export default {
  props: {
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100px'
    },
    className: {
      type: String,
      default: 'chart'
    },
    visitorData: {
      type: Array,
      default: () => ([])
    }
  },
  data() {
    return {
      chart: null,
      geoCoordMap: {}
    }
  },
  mounted() {
    this.initChart()
    this.__resizeHandler = debounce(() => {
      if (this.chart) {
        this.chart.resize()
      }
    }, 100)
    window.addEventListener('resize', this.__resizeHandler)
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    window.removeEventListener('resize', this.__resizeHandler)
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      const that = this
      const mapName = 'china';
      this.chart = echarts.init(this.$el, 'macarons')
      const areaJson = require("../images/china.json");
      echarts.registerMap(mapName, areaJson)
      var mapFeatures = areaJson.features;
      mapFeatures.forEach(function(v) {
          // 地区名称
          var name = v.properties.name;
          // 地区经纬度
          that.$set(that.geoCoordMap, name, v.properties.center)
      });
      this.chart.setOption({
        title: {
          text: '近7日游客来源地分布图',
          left:'10%',
          top:'5%',
          textStyle:{
            fontSize: 14,
            color: '#ffffff',
            align:'center'
          }
        },
        geo: {
            show: true,
            map: mapName,
            // zoom: 1.7,
            label: {
              normal: {
                  show: true,
                  textStyle: {
                    color: '#80FFFF'
                  },
                  formatter: function(para) {
                    const value = that.visitorData.filter(item => para.name.indexOf(item.name) > -1)
                    return para.name + (value.length > 0 ? value[0].value : '')
                }
              },
              emphasis: {
                  show: true,
              }
            },
            layoutCenter: ['48%', '70%'],//距离左右，上下距离的百分比
            layoutSize:'130%',//map百分比大小
            roam: false,
            itemStyle: {
                normal: {
                    areaColor: '#023677',
                    borderColor: '#000000',
                },
                emphasis: {
                    areaColor: '#4499d0',
                }
            }
        },
        series: [{
            name: '散点',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: that.convertData(this.visitorData),
            label: {
                normal: {
                    formatter: '{b}',
                    position: 'right',
                    show: false
                },
                emphasis: {
                    show: true
                }
            },
            itemStyle: {
                normal: {
                    color: '#fff'
                }
            },
        },
            {
                type: 'map',
                map: mapName,
                geoIndex: 0,
                aspectScale: 0.75, //长宽比
                showLegendSymbol: false, // 存在legend时显示
                label: {
                    normal: {
                        show: true
                    },
                    emphasis: {
                        show: false,
                        textStyle: {
                            color: '#fff'
                        }
                    }
                },
                roam: true,
                itemStyle: {
                    normal: {
                        areaColor: '#031525',
                        borderColor: '#3B5077',
                    },
                    emphasis: {
                        areaColor: '#2B91B7'
                    }
                },
                animation: false,
                data: this.visitorData
            },
            {
                name: '点',
                type: 'scatter',
                coordinateSystem: 'geo',
                zlevel: 6,
            },
            {
                name: 'Top 5',
                type: 'effectScatter',
                coordinateSystem: 'geo',
                data: that.convertData(this.visitorData.sort(function(a, b) {
                  return b.value - a.value;
                }).slice(0, 10)),
                symbolSize: function(val) {
                    return val[2] / 10;
                },
                showEffectOn: 'render',
                rippleEffect: {
                    brushType: 'stroke'
                },
                hoverAnimation: true,
                label: {
                    normal: {
                        formatter: '{b}',
                        position: 'left',
                        show: false
                    }
                },
                itemStyle: {
                    normal: {
                        color: 'yellow',
                        shadowBlur: 10,
                        shadowColor: 'yellow'
                    }
                },
                zlevel: 1
            },

        ]
      })
    },
    convertData(data) {
      var res = [];
      for (var i = 0; i < data.length; i++) {
        let geoCoordname = data[i].name
        if (this.geoCoordMap.length > 0) Object.keys(this.geoCoordMap).filter(item => item.indexOf(data[i].name) > -1)
        const geoCoord = this.geoCoordMap[geoCoordname];
        if (geoCoord) {
          res.push({
            name: data[i].name,
            value: geoCoord.concat(data[i].value)
          });
        }
      }
      return res;
    }
  }
}
</script>
